import api from './api.js';

export default {
  template: `
    <div>
      <div class="welcome-message">Hello！欢迎来到东软饭店！</div>
      <div class="recommended-dishes">
        <div class="dish-card" v-for="dish in dishes" :key="dish.dishId">
          <img :src="dish.image" :alt="dish.name" />
          <div class="dish-info">
            <div class="dish-name">{{ dish.name }}</div>
            <div class="dish-description">{{ dish.description }}</div>
            <div class="dish-price">价格：¥{{ dish.price }}</div>
            <el-button type="primary" @click="addToCart(dish)">添加到购物车</el-button>
          </div>
        </div>
      </div>
    </div>
  `,
  data() {
    return {
      dishes: [],
    };
  },
  async created() {
    const resp = await api.getDishes();
    this.dishes = resp.data.data;
  },
  methods: {
    async addToCart(dish) {
      if (!this.$root.isLoggedIn) {
        this.$message.error('请先登录');
        return;
      }
      const orderId = this.$root.orderId;
      try {
        await api.addOrderDish(orderId, dish.dishId);
        this.$message.success('菜品已成功添加到购物车');
      } catch (error) {
        this.$message.error('添加菜品到购物车失败');
      }
    },
  },
};
